<template>
	<div class="book-sort">
		<h3 style="margin-top: 1rem;">图书分类</h3>
		<ul>
			<li
			class="no-style"
			v-for="sort_title in books"
			:key="sort_title.id">
				<span class="sort-title">{{ sort_title.name }}</span>
				<a 
				class="sort-item"
				v-for="sort_item in sort_title.children"
				:key="sort_item.id"
				@click="$router.push({
					path: '/book_sort'+sort_item.id,
					query: {
						sort: sort_item.name
					}
				})">{{ sort_item.name }}</a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				books: []
			}
		},
		methods: {
			
		},
		created() {
			this.axios.get('/category')
			.then((response) => {
				if (response.status >= 200 & response.status <= 300) {
					this.books = response.data;
				}
			})
			.catch((err) => {
				console.log('图书分类请求失败！')
			})
		}
	}
</script>

<style>
	.book-sort {
		text-align: center;
		border:  solid #ccc 1px;
		width: 20%;
		background-color: #f3f3f3;
		border-radius: 5px;
		color: #18191C;
		font: 14px -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
	}
	/* 分类标题 */
	.sort-title {
		display: block;
		padding: 0.5rem 0;
		margin: 0.5rem 0;
		border: 1px solid #d0d1ee;
		border-radius: 30px;
		background-color: #eee;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}
	/* 分类项 */
	.sort-item {
		display: inline-block;
		line-height: 30px;
		height: 30px;
		margin: 0.5rem 0rem;
		padding: 0 0.5rem;
		border-right: solid #D0D1EE 1px;
		border-left: solid #D0D1EE 1px;
	}
	.sort-item:hover {
		background-color: #FFFFFF;
		cursor: pointer;
	}
</style>
